<div th:fragment="control_table_normal">
<script type="text/javascript">
	var get_table_option = function()
	{
		return {
			bg_color : [ "#f9f9f9", "#fff"],
			font_color : [ "black" ],
			head_bg_color : ["#fff"],
			head_font_color : ["#000"],
			rows : 3,
			page : "true",
			pagesize : 3,
			firstpagesize : 5,
			current_row : 3,
			columns : [],
			sql : ""
		};
	};
	function metadata_normaltable(params)
	{
		var column = {
			field : "TITLE",
			width : 1,
			title : "标题",
			algin : "center",
			data : [ "内容1", "内容2", "内容3" ]
		};
		var option = get_table_option();
		option.columns.push($.extend({}, column));
		params = $.extend({}, {
			OPTION : option,
			PAGE : {},
			COLUMNS : {
				column : column
			},
			SQL : "",
			COLORS : {}
		}, params);
		return $.extend(new metadata_chart_base(params), this);
	}

	function metadata_view_normaltable(control)
	{

		this.control = control;
		this.OPTION = function()
		{
			var _this = this;
		}
		this.PAGE = function()
		{
			var _this = this;
			var view = $($("#NORMALTABLEPAGE").html());
			var option = this.control.getMetadata("OPTION");
			view.find("select").val(option.page).change(function()
			{
				option.page = $(this).val();
				_this.linkageMetadata("PAGE", {});
			});

			view.find("input").each(function(i, item)
			{
				var name = $(item).attr("name");
				$(item).val(option[name]).keyup(function()
				{
					var _name = $(this).attr("name");
					option[_name] = $(this).val();
					_this.linkageMetadata("PAGE", {});
				});
			});

			view.find("a").click(function()
			{
				var opear = $(this).attr("opear");
				_this.linkageMetadata("PAGE", {
					opear : opear
				});
			});

			this.settingPanel.append(view);
		}
		this.SQL = function()
		{
			var _this = this;
			var view = $($("#NORMALTABLESQL").html());
			var option = this.control.getMetadata("OPTION");
			view.find("textarea").val(option.sql).keyup(function()
			{
				option.sql = $(this).val();
			});
			//SQL执行按钮
			view.on("click", ".sql-btn", function()
			{
				var sql = $(view).find("textarea").val();
				queryChartBySql(sql, "table", function(result)
				{
					try
					{
						if (result.state == "true")
						{
							option.rows = result.rows;
							option.current_row = parseInt(result.rows);
							for ( var i in option.columns)
							{
								var column = option.columns[i];
								column.data = result[column.field];
							}
							option.sql = sql;
							_this.linkViewOption(option);
						} else
						{
							$.QuickAlert.alertFail({
								content : result.faultInfo
							});
						}
					} catch (e)
					{
						console.error(e);
					}
				}, {
					page : option.page,
					minnumber : 0,
					maxnumber : option.firstpagesize
				});
			});
			this.settingPanel.append(view);
		}
		this.COLORS = function()
		{
			var _this = this;
			var view = $($("#COLORS").html());
			var option = this.control.getMetadata("OPTION");
			view.find("input").each(function(i, item)
			{
				var name = $(item).attr("name");
				$(item).val(option[name]).keyup(function()
				{
					option[$(this).attr("name")] = $(this).val().split(",");
					_this.linkViewOption(option);
				}).popoverBind();
			});
			this.settingPanel.append(view);
		}
		this.COLUMNS = function()
		{
			var _this = this;
			var view = $($("#NORMAL_TABLE_COLUMNS").html());
			var option = this.control.getMetadata("OPTION");
			var column = $.extend({}, this.control.getMetadata("COLUMNS").column);
			var columns = option.columns;
			var setColumns = function(column)
			{
				var column_view = $($("#NORMAL_TABLE_COLUMN").html());
				column_view.find("input[name=title]").val(column.title);
				column_view.find("input[name=field]").val(column.field);
				column_view.find("input[name=width]").val(column.width);
				column_view.find("select").val(column.algin);
				view.find("table").append(column_view);
			}
			var getColumns = function()
			{
				view.find("tr.column").each(function(i, item)
				{
					$.extend(option.columns[i], {
						field : $(item).find("input[name=field]").val(),
						width : $(item).find("input[name=width]").val(),
						title : $(item).find("input[name=title]").val(),
						algin : $(item).find("select").val()
					});
				});
			}

			for ( var i in columns)
			{
				setColumns(columns[i]);
			}
			//keyup
			view.on("keyup", "input", function()
			{
				getColumns();
				_this.linkViewOption(option);
			});
			
			view.on("focus", "input", function()
			{
				$(this).popover("show");
			});
			view.on("blur", "input", function()
			{
				$(this).popover("hide");
			});
			//change
			view.on("change", "select", function()
			{
				getColumns();
				_this.linkViewOption(option);
			});
			view.on("focus", "select", function()
			{
				$(this).popover("show");
			});
			view.on("blur", "select", function()
			{
				$(this).popover("hide");
			});
			
			//增加列
			view.find(".add-btn").click(function()
			{
				option.columns.push($.extend({}, column));
				setColumns(column);
				_this.linkViewOption(option);
			});
			//删除列
			view.on("click", ".delete-btn", function()
			{
				var index = $(this).index(".delete-btn");
				option.columns.splice(index, 1);
				$(this).parents("tr").remove();
				_this.linkViewOption(option);
			});
			this.settingPanel.append(view);
		}
		return $.extend(new metadata_view_chart_base(control), this);
	}

	function metadata_form_view_normaltable(control)
	{
		this.control = control;
		this.echart = chartTable.init($(control).find(".echarts-div")[0]);
		this.PAGE = function(value)
		{
			var bodyContainer = $(control).find(".bodyContainer");
			var scrollTop = bodyContainer.scrollTop();
			var maxTop = bodyContainer.find("table").height();
			var opear = value.opear;
			if (opear == "prev")
			{
				if (scrollTop > 0)
					scrollTop -= 30;
			} else if (opear == "next")
			{
				if (scrollTop < maxTop)
					scrollTop += 30;
			}
			bodyContainer.scrollTop(scrollTop);
		}
		return $.extend(new metadata_form_view_chart_base(control), this);
	}
</script>


<!-- 控制面板 报表 列基本配置 -->
<script type="text/html" id="NORMAL_TABLE_COLUMNS">
<div class="form-setting-group">
	<table class="setting-control-table">
		<tr>
			<td class="setting-control-title" colspan="5">数据配置</td>
		</tr>
		<tr>
			<td class="setting-control-label100" style="width:150px;">标题</td>
			<td class="setting-control-label100">字段</td>
			<td class="setting-control-label100">对齐方式</td>
			<td class="setting-control-label100">宽度(占比)</td>
			<td><a href="javascript:;" class="btn btn-default btn-sm add-btn">增加列</a></td>
		</tr>
	</table>
</div>
</script>

<!-- 控制面板 报表 列详细配置 -->
<script type="text/html" id="NORMAL_TABLE_COLUMN">
		<tr class="column">
			<td><input name="title" class="form-control" data-content="报表标题名称" data-trigger="manual" data-placement="bottom"></td>
			<td><input name="field" class="form-control" data-content="配置SQL字段名称" data-trigger="manual" data-placement="bottom"></td>
			<td>
				<select name="algin" class="form-control" data-content="居左、居中、居右" data-trigger="manual" data-placement="bottom">
					<option value="left">居左</option>
					<option value="center">居中</option>
					<option value="right">居右</option>
				</select>
			</td>
			<td><input name="width" class="form-control" data-content="内容宽度占比" data-trigger="manual" data-placement="bottom"></td>
			<td><a href="javascript:;" class="btn btn-default btn-sm delete-btn">删除列</a></td>
		</tr>
</script>

<!-- 控制面板 报表 颜色配置 -->
<script type="text/html" id="COLORS">
<div class="form-setting-group">
	<table class="setting-control-table">
		<tr>
			<td class="setting-control-title" colspan="4">颜色配置</td>
		</tr>
		<tr>
			<td class="setting-control-label100">标题文字颜色</td>
			<td><input name="head_font_color" class="form-control" data-content="按照RBG代码配置,标题文字颜色只可配置一种颜色" data-trigger="manual" data-placement="left"></td>
		</tr>
		<tr>
			<td class="setting-control-label100">标题背景颜色</td>
			<td><input name="head_bg_color" class="form-control" data-content="按照RBG代码配置,标题背景颜色只可配置一种颜色" data-trigger="manual" data-placement="left"></td>
		</tr>
		<tr>
			<td class="setting-control-label100">表格文字颜色</td>
			<td><input name="font_color" class="form-control" data-content="按照RBG代码配置,表格文字颜色可配置多种颜色循环使用,用逗号隔开" data-trigger="manual" data-placement="left"></td>
		</tr>
		<tr>
			<td class="setting-control-label100">表格行背景色</td>
			<td><input name="bg_color" class="form-control" data-content="按照RBG代码配置,表格行背景色可配置多种颜色循环使用,用逗号隔开" data-trigger="manual" data-placement="left"></td>
		</tr>
	</table>
</div>
</script>

<!-- 控制面板 报表 SQL配置 -->
<script type="text/html" id="NORMALTABLESQL">
<div class="form-setting-group">
	<table class="setting-control-table">
		<tr class="setting-control-title">
			<td>SQL配置</td>
		</tr>
		<tr>
			<td><textarea class='form-control' placeholder="请配置SQL语句"></textarea></td>
		</tr>
		<tr>
			<td><a href="javascript:;" class="btn btn-default btn-sm sql-btn">执行SQL</a></td>
		</tr>
	</table>
</div>
</script>
<!-- 控制面板 报表 分页配置 -->
<script type="text/html" id="NORMALTABLEPAGE">
<div class="form-setting-group">
	<table class="setting-control-table">
		<tr class="setting-control-title">
			<td colspan="8">分页配置</td>
		</tr>
		<tr>
			<td class="setting-control-label80">是否分页</td>
			<td><select name="isPage" style="width:80px;" class="form-control" data-content="报表是否分页显示" data-trigger="manual" data-placement="bottom"><option value="true">是</option><option value="false">否</option></select></td>
			<td class="setting-control-label80">首页加载量</td>
			<td><input name="firstpagesize" class="form-control"/></td>
			<td class="setting-control-label80">每页加载量</td>
			<td><input name="pagesize" class="form-control"/></td>
			<td><a href="javascript:;" class="btn btn-default btn-sm prev-btn" opear="prev">上一页</a></td>
			<td><a href="javascript:;" class="btn btn-default btn-sm next-btn" opear="next">下一页</a></td>
		</tr>
	</table>
</div>
</script>
</div>
